<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="./data/favicon.ico">
    <script type="module" charset="UTF-8" src="./libs/three.js/Three.js"></script>
    <style>
        body{
            margin: 0px;
            overflow: hidden;
        }
    </style>
    <title>threejs-lesson-02</title>
</head>
<body>
    <div id="puidu-webgk-output"></div>
    <script type="module">
        import{Scene,PerspectiveCamera,WebGLRenderer,BoxGeometry,Mesh,MeshBasicMaterial} from "./libs/three.js/three.js" 
      //创建场景对象
      var scene = new Scene();
      //透视摄像机
      var prescamera = new PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
    //渲染器
    var render = new WebGLRenderer();
    render.setSize(window.innerWidth,window.innerHeight);
     document.getElementById("puidu-webgk-output").appendChild(render.domElement) 
     //创建渲染对象
     var geometry = new BoxGeometry();
     var material = new MeshBasicMaterial({color:0xFF0000});
     var cube = new Mesh(geometry,material);
     scene.add(cube)
     cube.rotation.x+=0.5;
     cube.rotation.y+=0.5;
    

     prescamera.position.z =5;


     render.render(scene,prescamera);
    </script>
</body>
</html>